<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model.number="num">
    <h1>原始数据：{{num}}</h1>
    <h1>计算属性渲染：{{doubleNum}}</h1>

    <h1>数组：{{proList}}</h1>
    <h1>名字：{{myname}}</h1>
    <button @click="changeName">改名</button>
  </div>
     <script src="./vue.js"></script>
     <script>
        new Vue({
          el:"#app",
          data(){
            return {
              num:0,
              list:["黑龙江","吉林","辽宁"],
              xing:"",//姓
              ming:""//名
            }
          },
          methods:{
            changeName(){
              // 给计算属性从新赋值
              this.myname="Zhang San"
            }
          },
          computed:{ //vue的计算属性 ，用来计算data的数据和vuex的数据的，基于依赖缓存的设计，计算属性会缓存，，只有数据发生变化才会从新计算
            
            // 计算属性基本写成函数 ，函数一定要有返回值，返回计算后的结果，计算属性内部不能执行异步操作
            doubleNum(){
              let dnum=this.num*2;
              return dnum
            },
            proList(){ //将数组数据处理
              let mylist=this.list.map(item=>{
                return item+"省"
              })
              return mylist
            },
            // 计算属性写法2------
            myname:{ //get 和set 给计算属性赋值的时候用
              get(){//get 能够赋值数据
                  return this.xing+"---"+this.ming
              },
              set(val){ //val 劫持到的数据 
                  // set能够劫持到 给计算属性的赋值
                let arr=val.split(" ")
                this.xing="姓："+arr[0]
                this.ming="名："+arr[1]
                console.log(val,"劫持到的数据")
              }
            }
          }
        })
     </script>
</body>
</html>